<script setup>

import { useCounterStore } from './store/counter.js'
const store = useCounterStore()

import { ref } from 'vue'

const count = ref(0)

</script>

<template>
  <h3>表单输入绑定-值绑定 hr水平分割线</h3>
  <hr>
  <!-- `picked` 在被选择时是字符串 "a" -->
  <input type="radio" v-model="picked" value="a" />

  <!-- `toggle` 只会为 true 或 false -->
  <input type="checkbox" v-model="toggle" />

  <!-- `selected` 在第一项被选中时为字符串 "abc" -->
  <select v-model="selected">
    <option value="abc">ABC</option>
  </select>

  <select v-model="selected">
    <!-- 内联对象字面量 -->
    <option :value="{ number: 123 }">123</option>
  </select>

  <!--  
      .lazy 修饰符 
      默认情况下，v-model 在每次输入时触发更新。
      使用 .lazy 修饰符，将输入事件延迟到 change 事件。
      .number  修饰符 
      将输入值转为数字类型。 无法处理返回原始数值
      .trim 修饰符 
      自动过滤用户输入的首尾空白字符。
  -->
      <hr>
      <button @click="count++">You clicked me {{ count }} times.</button>

      <hr>

</template>
